  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  	<title>群星网约车</title>
  	<link rel="icon" href="../image/carMR.png" type="image/png">
  <!--这里引入页面的样式-->
  <style>
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 20px;
		/* 			background-color:gainsboro; */
	}

	.logo {
		height: 50px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.links {
		display: flex;
		align-items: center;
	}

	.links el-link {
		margin-left: 10px;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		margin-right: 10px;
	}

	.username a {
		color: #333;
		text-decoration: none;
	}
	/* 绿色点样式 */
	.green-point {
		width: 10px;
		height: 10px;
		background-color: green;
		border-radius: 50%;
		margin-right: 10px;
		display: inline-block;
	}
	
	/* 红色点样式 */
	.red-point {
		width: 10px;
		height: 10px;
		background-color: red;
		border-radius: 50%;
		margin-right: 10px;
		display: inline-block;
	}
	/* 橘黄色点样式 */
	.orange-point {
		width: 10px;
		height: 10px;
		background-color: orange;
		border-radius: 50%;
		margin-right: 10px;
		display: inline-block;
	}
	.order-table {
		padding: 40px;
	}
  </style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<body>
<div id="app">
	<div class="header">
		<img class="logo" src="../image/carMR.png">
		<span class="title">群星网约车祝您一帆风顺</span>
		<div class="links">
			<el-link href="driverMain.html" target="_self" :underline="false">主页&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="orderDriverInfo.html" target="_self" :underline="false">我的订单&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="taxiInfo.html" target="_blank" :underline="false">群星简介&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="driverInfo.html" target="_self" :underline="false">个人中心&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<div v-if="driverStatus === '在线'">
				<div class="green-point"></div>
			</div>
			<div v-else-if="driverStatus === '离线'">
				<div class="red-point"></div>
			</div>
			<div v-else>
				<div class="orange-point"></div>
			</div>
			<el-select v-model="driverStatus" placeholder="选择司机状态" style="width: 120px;">
				<el-option label="离线" value="离线"></el-option>
				<el-option label="在线" value="在线"></el-option>
				<el-option label="接单中" value="接单中"></el-option>
			</el-select>
		</div>
		<div class="user-info">
			<div>
				<el-avatar :src="avatar"></el-avatar>
			</div>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<span class="username"><a id="uname" href="javascript:void(0)">{{ displayUsername }}</a></span>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<el-link target="_blank" :underline="false" @click="exitInfo">退出系统</el-link>
			&nbsp;&nbsp;&nbsp;&nbsp;
		</div>
	</div>
	<div class="order-table">
		<span>订单信息：</span>
		<el-input v-model="search" placeholder="订单详情搜索" clearable @clear="handleSearch" @input="handleSearch" style="max-width: 200px;"></el-input>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<span>订单状态：</span>
		<el-input v-model="searchOrder" placeholder="订单状态搜索" clearable @clear="handleSearch" @input="handleSearch" style="max-width: 200px;"></el-input>
		<el-table :data="orders" style="width: 100%">
			<el-table-column prop="orderId" label="订单编号" width="120"></el-table-column>
			<el-table-column prop="userId" label="乘客编号" width="120"></el-table-column>
			<el-table-column prop="departureLocation" label="起点" width="150"></el-table-column>
			<el-table-column prop="destinationLocation" label="终点" width="150"></el-table-column>
			<el-table-column prop="orderDate" label="发起时间" width="200"></el-table-column>
			<el-table-column prop="totalAmount" label="金额" width="100"></el-table-column>
			<el-table-column prop="status" label="订单状态" width="120">
				<template slot-scope="scope">
					<el-tag
							:type="getOrderStatusType(scope.row.status)"
					>
						{{ scope.row.status }}
					</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
				background
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalOrders"
				:page-size="pageSize"
				:current-page="currentPage"
				:page-sizes="[5, 10, 20, 50]"
				@current-change="handlePageChange"
				@size-change="handleSizeChange">
		</el-pagination>
	</div>
</div>


<script>
	// request拦截器，将用户token放入头中
	axios.interceptors.request.use(
			config => {
				let token = localStorage.getItem("token"); // 确保 token 正确存储在 localStorage 中
				if (token) {
					config.headers['token'] = token;
				}
				return config;
			},
			error => {
				console.log(error);
				return Promise.reject(error);
			}
	);
  // 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
  // 创建 Vue 实例
  new Vue({
    el: '#app',
    data() {
      return {
		userId: "",
		userName: "",
		driverStatus: '离线',
		avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', // 默认头像链接
		search: '',
	    searchOrder: '',
		currentPage: 1,
		pageSize: 10,
		totalOrders: 0,
		orders: [
			{ orderId: '123', userId: '456', departureLocation: '北京', destinationLocation: '上海', orderDate: '2023-01-01 12:00:00', totalAmount: 100.5, status: '已完成' },
			{ orderId: '124', userId: '457', departureLocation: '广州', destinationLocation: '深圳', orderDate: '2023-01-02 14:30:00', totalAmount: 80.0, status: '进行中' },
			// 继续添加订单
		],
	  statusMap: {  // 在 data 中定义映射关系
		  '待处理': '1',
		  '已确认': '2',
		  '已完成': '3',
		  '已取消': '4',
		  '待付款': '5'
	  }
      }
    },
    methods: {
	fetchOrders() {
		const mappedStatus = this.statusMap[this.searchOrder] || this.searchOrder;
		axios.get(`/order/orders/getOrderByDriverId`, {
			params: {
				driverId: this.userId,
				page: this.currentPage,
				size: this.pageSize,
				keyword: this.search,
				keywordOrder: mappedStatus
			}
		}).then(response => {
			if (response.data.code === 1) {
				console.log("成功获取订单信息");
				const orders = response.data.data.list.map(order => {
					// 处理订单状态
					switch (order.status) {
						case '1':
							order.status = '待处理';
							break;
						case '2':
							order.status = '已确认';
							break;
						case '3':
							order.status = '已完成';
							break;
						case '4':
							order.status = '已取消';
							break;
						default:
							order.status = '待付款';
							break;
					}
					// 处理金额
					if (!order.totalAmount) {
						order.totalAmount = '未接单';
					}
					// 处理发起时间
					if (order.orderDate) {
						order.orderDate = order.orderDate.replace('T', ' ');
					}
					return order;
				});
				this.orders = orders;
				this.totalOrders = response.data.data.total;
			}
		});
	},
	handleSearch() {
		this.currentPage = 1;
		this.fetchOrders();
	},
	handlePageChange(page) {
		this.currentPage = page;
		this.fetchOrders();
	},
	handleSizeChange(size) {
		this.pageSize = size;
		this.currentPage = 1;
		this.fetchOrders();
	},
	getOrderStatusType(status) {
		switch (status) {
			case '待处理':
				return 'info';
			case '已确认':
				return 'success';
			case '已完成':
				return 'success';
			case '已取消':
				return 'danger';
			case '待付款':
				return 'warning';
			default:
				return '';
		}
	},
		exitInfo(){
		axios.put("/driver/drivers/exitStatus?driverId="+this.userId)
				.then(response=>{
					if(response.data.code==1){
						console.log("退出修改状态成功");
					}
				});
			localStorage.removeItem('userId');
			localStorage.removeItem('userName');
			window.location.href = "../html/login.html"; // 页面跳转
		},
		// 发送请求给后端更新司机状态
		updateDriverStatus(status) {
			localStorage.setItem("driverStatus",this.driverStatus);
			axios.put('/driver/drivers/updateDriverStatus', {
				id: this.userId,
				status: status
			})
			.then(response => {
				console.log('更新司机状态成功:', response.data);
			})
			.catch(error => {
				console.error('更新司机状态失败:', error);
			});
		},
		// 监听司机状态变化
		onDriverStatusChange() {
			console.log('司机状态变为：', this.driverStatus);
			// 根据不同的司机状态发送请求给后端
			switch (this.driverStatus) {
				case '离线':
					// 发送请求告诉后端司机已经离线
					this.updateDriverStatus('3');
					break;
				case '在线':
					// 发送请求告诉后端司机已经上线
					this.updateDriverStatus('1');
					break;
				case '接单中':
					// 发送请求告诉后端司机正在接单
					this.updateDriverStatus('2');
					break;
				default:
					console.error('未知司机状态:', this.driverStatus);
					break;
			}
		},
    },
  created() {
	  this.driverStatus = localStorage.getItem("driverStatus");
  },
    mounted(){
		var id=localStorage.getItem('userId');
		this.userId = parseInt(id, 10);
		this.userName = localStorage.getItem('userName');
		this.avatar = localStorage.getItem('pic');
/*		this.updateDriverStatus('3');*/
		this.fetchOrders();
/* 		if (this.userName === null) {
			this.$message.error('非法进入,请先登录');
			setTimeout(() => {
				window.location.href = "../html/login.html";
			}, 3000); // 延迟2秒（2000毫秒）执行
		 } */
    },
	computed: {
		displayUsername() {
			// 如果 userName 不为空，显示 userName；否则显示 "未登录"
			return this.userName ? this.userName : "未登录";
		}
	},
	watch: {
		// 监听司机状态变化
		driverStatus: 'onDriverStatusChange'
	},
  });
</script>
<!-- 不用vue的js代码写在下面-->
<script>
</script>
</body>
</html>
